<template>
	<view class="page-container">
		<!-- Tabs -->
		<view class="tabs-container">
			<view class="tabs">
				<view 
					v-for="(tab, index) in tabs" 
					:key="index" 
					class="tab-item" 
					:class="{ active: currentTabIndex === index }" 
					@click="switchTab(index)"
				>
					<text class="tab-text">{{ tab.text }}</text>
					<text class="tab-count">{{ tab.count }}</text>
				</view>
			</view>
		</view>

		<!-- Content Swiper -->
		<swiper class="swiper" :current="currentTabIndex" @change="swiperChange">
			<!-- 进行中的任务 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-view">
					<template v-if="!isLoading">
						<view v-if="receivedTasks.length > 0">
							<!-- 使用内联HTML模板，与发布任务保持一致 -->
							<view v-for="task in receivedTasks" :key="task._id" class="task-card" @click="goToTaskDetail(task._id)">
								<view class="task-card-header">
									<text class="task-title">{{ task.title || task.type || '任务' }}</text>
									<view class="task-status" :class="getStatusClass(task.status)">{{ getStatusText(task.status) }}</view>
								</view>
								<view class="task-desc">{{ task.description || '暂无描述' }}</view>
								<view class="task-footer">
									<view class="task-reward">
										<uni-icons type="wallet" color="#f9ae3d" size="16"></uni-icons>
										<text>{{ task.reward || 0 }} 元</text>
									</view>
									<view class="task-time">
										<uni-icons type="calendar" color="#909399" size="16"></uni-icons>
										<text>{{ formatTime(task.publish_time || task.start_time) }}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="empty-state">
							<uni-icons type="clock" size="60" color="#C8C9CC"></uni-icons>
							<text class="empty-text">暂无进行中的任务</text>
						</view>
					</template>
					<template v-else>
						<TaskCardSkeleton v-for="i in 4" :key="i" />
					</template>
				</scroll-view>
			</swiper-item>

			<!-- 我发布的任务 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-view">
					<template v-if="!isLoading">
						
						
						<view v-if="publishedTasks.length > 0">
							<!-- 直接渲染任务数据，不使用TaskCard组件 -->
							<view v-for="task in publishedTasks" :key="task._id" class="task-card" @click="goToTaskDetail(task._id)">
								<view class="task-card-header">
									<text class="task-title">{{ task.title|| '任务' }}</text>
									<view class="task-status status-processing">进行中</view>
								</view>
								<view class="task-desc">{{ task.description || '暂无描述' }}</view>
								<view class="task-footer">
									<view class="task-reward">
										<uni-icons type="wallet" color="#f9ae3d" size="16"></uni-icons>
										<text>{{ task.reward || 0 }} 元</text>
									</view>
									<view class="task-time">
										<uni-icons type="calendar" color="#909399" size="16"></uni-icons>
										<text>{{ formatTime(task.start_time) }}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="empty-state">
							<uni-icons type="paperplane" size="60" color="#C8C9CC"></uni-icons>
							<text class="empty-text">您还没有发布任何任务</text>
						</view>
					</template>
					<template v-else>
						<TaskCardSkeleton v-for="i in 4" :key="i" />
					</template>
				</scroll-view>
			</swiper-item>

			<!-- 已完成的任务 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-view">
					<template v-if="!isLoading">
						<view v-if="historyTasks.length > 0">
							<!-- 使用内联HTML模板，与其他tab保持一致 -->
							<view v-for="task in historyTasks" :key="task._id" class="task-card" @click="goToTaskDetail(task._id)">
								<view class="task-card-header">
									<text class="task-title">{{ task.title || task.type || '任务' }}</text>
									<view class="task-status" :class="getStatusClass(task.status)">{{ getStatusText(task.status) }}</view>
								</view>
								<view class="task-desc">{{ task.description || '暂无描述' }}</view>
								<view class="task-footer">
									<view class="task-reward">
										<uni-icons type="wallet" color="#f9ae3d" size="16"></uni-icons>
										<text>{{ task.reward || 0 }} 元</text>
									</view>
									<view class="task-time">
										<uni-icons type="calendar" color="#909399" size="16"></uni-icons>
										<text>{{ formatTime(task.publish_time || task.start_time) }}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="empty-state">
							<uni-icons type="checkmarkempty" size="60" color="#C8C9CC"></uni-icons>
							<text class="empty-text">暂无已完成的任务</text>
						</view>
					</template>
					<template v-else>
						<TaskCardSkeleton v-for="i in 4" :key="i" />
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 单文件组件内的本地组件
	const TaskCard = {
		props: ['task'],
		template: `
			<view class="task-card" @click="$emit('click')">
				<view class="task-card-header">
					<text class="task-title">{{ taskTitle }}</text>
					<view class="task-status" :class="statusClass">{{ statusText }}</view>
				</view>
				<view class="task-desc">{{ task.description || '暂无描述' }}</view>
				<view class="task-footer">
					<view class="task-reward">
						<uni-icons type="wallet" color="#f9ae3d" size="16"></uni-icons>
						<text>{{ task.reward || 0 }} 元</text>
					</view>
					<view class="task-time">
						<uni-icons type="calendar" color="#909399" size="16"></uni-icons>
						<text>{{ formatTime(task.publish_time || task.start_time) }}</text>
					</view>
				</view>
			</view>
		`,
		computed: {
			taskTitle() {
				// 如果没有title字段，使用type作为标题
				return this.task.title || this.task.type || '任务';
			},
			statusText() {
				const map = { 'pending': '待接单', 'processing': '进行中', 'completed': '已完成', 'cancelled': '已取消' };
				return map[this.task.status] || '未知';
			},
			statusClass() {
				return `status-${this.task.status}`;
			}
		},
		methods: {
			formatTime(timestamp) {
				if (!timestamp) return '未知时间';
				const date = new Date(timestamp);
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${month}-${day}`;
			}
		}
	};

	const TaskCardSkeleton = {
		template: `
			<view class="task-card skeleton">
				<view class="skeleton-line" style="width: 50%; height: 32rpx; margin-bottom: 24rpx;"></view>
				<view class="skeleton-line" style="width: 100%; height: 28rpx; margin-bottom: 20rpx;"></view>
				<view class="skeleton-line" style="width: 70%; height: 24rpx;"></view>
			</view>
		`
	};

	export default {
		components: { TaskCard, TaskCardSkeleton },
		data() {
			return {
				currentTabIndex: 0,
				tabs: [
					{ text: '进行中', type: 'received', count: 0 },
					{ text: '我发布的', type: 'published', count: 0 },
					{ text: '已完成', type: 'history', count: 0 }
				],
				receivedTasks: [],
				publishedTasks: [],
				historyTasks: [],
				isLoading: true,
				userInfo: null
			};
		},
		onLoad(options) {
			const typeMap = { 'received': 0, 'published': 1, 'history': 2, 'processing': 0 };
			if (options.type && typeMap[options.type] !== undefined) {
				this.currentTabIndex = typeMap[options.type];
			}
			this.loadAllData();
		},
		methods: {
			switchTab(index) {
				if (this.currentTabIndex !== index) {
					this.currentTabIndex = index;
				}
			},
			swiperChange(e) {
				this.currentTabIndex = e.detail.current;
			},
			formatTime(timestamp) {
				if (!timestamp) return '未知时间';
				const date = new Date(timestamp);
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${month}-${day}`;
			},
			getStatusText(status) {
				const map = { 
					'pending': '待接单', 
					'processing': '进行中', 
					'completed': '已完成', 
					'cancelled': '已取消' 
				};
				return map[status] || '未知';
			},
			getStatusClass(status) {
				return `status-${status}`;
			},
			async loadAllData() {
				this.isLoading = true;
				this.userInfo = uni.getStorageSync('uni-id-pages-userInfo');
				if (!this.userInfo || !this.userInfo._id) {
					uni.showToast({ title: '请先登录', icon: 'none' });
					setTimeout(() => uni.navigateBack(), 1500);
					this.isLoading = false;
					return;
				}
				
				try {
					// 使用云函数获取任务数据
					const res = await uniCloud.callFunction({
						name: 'getUserTasks'
					});

					if (res.result.code === 200) {
						const data = res.result.data;
						
						console.log('【前端】获取到的任务数据:', data);
						console.log('【前端】received数据:', data.received);
						console.log('【前端】published数据:', data.published);
						console.log('【前端】history数据:', data.history);
						
						// 设置进行中任务
						this.receivedTasks = data.received || [];
						this.$set(this.tabs[0], 'count', data.received ? data.received.length : 0);
    console.log('【前端】进行中任务设置完成，数量:', this.receivedTasks.length);
						
						// 设置发布任务
						this.publishedTasks = data.published || [];
						this.$set(this.tabs[1], 'count', data.published ? data.published.length : 0);
						console.log('【前端】发布任务设置完成，数量:', this.publishedTasks.length);
						
						// 设置已完成任务
						this.historyTasks = data.history || [];
						this.$set(this.tabs[2], 'count', data.history ? data.history.length : 0);
						console.log('【前端】已完成任务设置完成，数量:', this.historyTasks.length);
						
						// 输出最终的tabs状态
						console.log('【前端】最终tabs状态:', this.tabs);
						
					} else {
						console.error('获取任务数据失败:', res.result.msg);
						uni.showToast({ title: res.result.msg || '数据加载失败', icon: 'none' });
					}
				} catch (error) {
					console.error("加载任务数据失败: ", error);
					uni.showToast({ title: "数据加载失败", icon: 'none' });
				} finally {
					this.isLoading = false;
				}
			},
			goToTaskDetail(taskId) {
				uni.navigateTo({
					url: `/pages/task/TaskDetail/TaskDetail?id=${taskId}`
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #F5F6FA;
		height: 100%;
	}
	
	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.tabs-container {
		background-color: #FFFFFF;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #EBEEF5;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 110rpx;
		font-size: 15px;
		color: #606266;
		position: relative;
		transition: color 0.3s;
	}

	.tab-text {
		font-size: 15px;
		font-weight: 500;
	}

	.tab-count {
		font-size: 13px;
		margin-top: 6rpx;
		font-weight: 600;
		color: #909399;
	}

	.tab-item.active .tab-text {
		color: #409EFF;
		font-weight: 600;
	}
	
	.tab-item.active .tab-count {
		color: #409EFF;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 50rpx;
		height: 6rpx;
		background-color: #409EFF;
		border-radius: 3rpx;
	}

	.swiper {
		flex: 1;
	}

	.swiper-item,
	.scroll-view {
		height: 100%;
	}

	.task-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.task-card.skeleton {
		animation: skeleton-blink 1.5s infinite ease-in-out;
	}

	@keyframes skeleton-blink {
		0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; }
	}

	.skeleton-line {
		background-color: #f0f2f5;
		border-radius: 8rpx;
	}
	
	.task-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.task-title {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}
	
	.task-status {
		font-size: 12px;
		padding: 6rpx 14rpx;
		border-radius: 100rpx;
	}
	
	.status-pending { color: #409EFF; background-color: #ecf5ff; }
	.status-in_progress { color: #67c23a; background-color: #f0f9eb; }
	.status-completed { color: #909399; background-color: #f4f4f5; }
	.status-cancelled { color: #f56c6c; background-color: #fef0f0; }
	
	.task-desc {
		font-size: 14px;
		color: #606266;
		margin-bottom: 24rpx;
		line-height: 1.5;
	}
	
	.task-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #909399;
	}

	.task-reward, .task-time {
		display: flex;
		align-items: center;
	}

	.task-reward text, .task-time text {
		margin-left: 8rpx;
	}

	.task-reward text {
		color: #f9ae3d;
		font-weight: 500;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: #909399;
		padding-top: 200rpx;
		box-sizing: border-box;
	}
	
	.empty-text {
		margin-top: 20rpx;
		font-size: 14px;
	}
</style>
